<template>
  <div class="box">
    <van-nav-bar :title="userType==1?'患者登录':'医护登录'"
                 left-arrow
                 @click-left="$router.push('/userType');" />
    <div class="tab">
      <div class="tabs"
           @click="Active(0)">
        <span :class="active==0?'active':''">手机密码登录</span>
      </div>
      <div class="tabs"
           @click="Active(1)">
        <span :class="active==1?'active':''">手机验证码登录</span>
      </div>
    </div>
    <div class="info">
      <van-cell-group>
        <van-field label="手机号"
                   v-model.trim="user.username"
                   placeholder="请输入手机号" />

        <van-field v-if="active==0"
                   type="password"
                   v-model.trim="user.password"
                   label="密码"
                   placeholder="请输入密码" />
        <van-field v-if="active==1"
                   v-model="user.code"
                   center
                   clearable
                   label="验证码"
                   placeholder="请输入验证码">
          <template #button>
            <van-button v-if="active==1"
                        :disabled="!disabledCodeBtn"
                        @click="getCode"
                        size="small"
                        class="code">{{codeText}}</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div class="zhuce"
           @click="toPath('/register?userType='+userType)">注册</div>
      <button @click="ctrlLogin"
              class="btn_login">登录</button>
    </div>
  </div>
</template>

<script>
import { login, mobileLogin, sendMobileCode } from '@/api/login'
import storage from 'store'
export default {
  name: 'LoginIndex',
  data () {
    return {
      userType: 1,
      active: 0,
      codeText: '获取验证码',
      disabledCodeBtn: true,
      user: {
        username: '', // 手机
        password: '',
        code: ''
      }
    }
  },
  computed: {
  },
  created () {
    this.userType = this.$route.query.userType
    // 获取身份
    this.$store.commit('SET_USER_TYPE', this.userType)
    storage.set('userType', this.userType)
  },
  methods: {
    // 登录
    async ctrlLogin () {
      let _p = {}
      let fun = null
      if (this.active === 1) { // 验证码登录
        if (!this.user.code) return this.$toast.fail('验证码不能为空')
        _p = { mobile: this.user.username, captcha: this.user.code, identity: this.userType }
        fun = mobileLogin
      }
      if (this.active === 0) { // 账号密码登录
        _p = { account: this.user.username, password: this.user.password, identity: this.userType }
        fun = login
      }
      const { code, data, msg } = await fun(_p)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success(msg)
      this.$store.commit('SET_TOKEN', data.userinfo.token)
      this.$store.commit('SET_USER_INFO', data.userinfo)
      this.$store.commit('SET_USER_TYPE', this.userType)
      const path = this.userType === '1' ? '/home' : '/home_'
      this.$router.push(path)
    },
    toPath (url) {
      this.$router.push(url)
    },
    // 高亮显示
    Active (num) {
      this.active = num
    },
    // 获取验证码
    async getCode () {
      const _p = { mobile: this.user.username, event: 'mobilelogin' }
      const { code, msg } = await sendMobileCode(_p)
      if (code !== 1) return this.$toast.fail(msg)
      this.countDown(60)
    },
    // 倒计时
    countDown (time) {
      if (time === 0) {
        this.disabledCodeBtn = true
        this.codeText = '获取验证码'
        return
      } else {
        this.disabledCodeBtn = false
        this.codeText = time + 's'
        time--
      }
      setTimeout(() => {
        this.countDown(time)
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background: #f7f8fa;
  .tab {
    width: 100%;
    height: 70px;
    margin-top: 40px !important;
    background-color: #fff;
    .tabs {
      display: inline-block;
      width: 50%;
      height: 70px;
      text-align: center;
      span {
        width: 44%;
        height: 40px;
        padding: 6px 14px;
        box-sizing: border-box;
        line-height: 80px;
        color: #000000;
        background-color: #ffffff;
        font-size: 14px;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
  }
  .info {
    width: 100%;
    height: 218px;
    margin-top: 8px;
    background-color: #fff;
    /deep/.van-cell {
      line-height: 36px;
    }
    /deep/.van-cell__title {
      width: 65px;
      font-weight: 600;
    }
  }
  .zhuce {
    width: 100%;
    height: 40px;
    padding: 5px 15px;
    box-sizing: border-box;
    color: #4182ff;
    text-align: right;
    font-size: 16px;
    letter-spacing: 2px;
    text-decoration: underline;
  }
  .btn_login {
    display: block;
    width: 60%;
    height: 48px;
    line-height: 48px;
    background: linear-gradient(90deg, #3eb3ff 0%, #436eff 100%);
    box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
    border-radius: 45px;
    color: #ffffff;
    font-size: 20px;
    margin: 0 auto;
    border: none;
  }
}
.active {
  background-color: #4182ff !important;
  color: #ffffff !important;
}
.code {
  width: 83px;
  height: 30px;
  background: linear-gradient(180deg, #68e0cf 0%, #209cff 100%);
  opacity: 1;
  border-radius: 4px;
  color: #ffffff;
  font-size: 10px;
}
</style>
